<!-- 我的视频 -->

<template>
  <div class="PointParking-MyVideo">
    <EasyModal v-model="easyVisible" title="选择监控设备" large @submit="toSubmit" @close="toReset">
      <ChooseIOT :obj="obj" bind="deviceList" deviceCategoryId="1" />
    </EasyModal>

    <div class="PointParking-MyVideo-item">
      <div class="row3">
        <div
          class="PointParking-MyVideo-link"
          :class="{ 'PointParking-MyVideo-link-disabled': !one.id }"
          @click="toOpen"
        >
          <img :src="iconUrl" />
          <div>关联监控设备</div>
        </div>
      </div>
    </div>

    <div class="PointParking-MyVideo-item" v-for="item in deviceList" :key="item.deviceId">
      <div class="row3">
        <CommonVideo :id="item.deviceId" :key="item.deviceId" :name="item.deviceName" />
      </div>

      <div class="PointParking-MyVideo-item-name">
        <div>{{ item.deviceName }}</div>
        <i class="el-icon-close" @click="toDel(item)" />
      </div>

      <div class="CoreWeb-FormPhoto-del" @click.stop="toDel(item)">
        <i class="el-icon-close" />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ModalVideo from '../../components/ModalVideo'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyVideo',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('../../components', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
      obj: { deviceList: [] }, // 数据对象
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 图标路径
     */
    iconUrl: ModalVideo.computed.iconUrl,

    /**
     * 设备列表
     */
    deviceList() {
      const { videoDevice } = this.one.parkDto || {}
      return videoDevice || []
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听弹窗可见
     */
    easyVisible(visible) {
      visible && this.toReset()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 弹窗
     */
    toOpen() {
      if (this.one.id) this.easyVisible = true
    },

    /**
     * 提交
     */
    toSubmit() {
      const { obj, one, startAdd } = this
      this.easyVisible = false
      one.parkDto.videoDevice = CORE.clone(obj.deviceList)
      one.deviceId = obj.deviceList.map(({ id }) => id)
      startAdd()
    },

    /**
     * 重置
     */
    toReset() {
      this.obj = { deviceList: this.deviceList.map((item) => ({ ...item, id: item.deviceId })) }
    },

    /**
     * 清除
     */
    toClear() {
      this.obj = { deviceList: [] }
    },

    /**
     * 删除
     */
    toDel({ deviceId }) {
      const { deviceList, one, startAdd } = this
      one.deviceId = deviceList.map((item) => item.deviceId).filter((id) => deviceId !== id)
      startAdd()
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
